<!--
 * @Author: your name
 * @Date: 2021-09-02 17:14:41
 * @LastEditTime: 2021-09-05 14:23:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\components\Tooltip\Tooltip.vue
-->
<template>
    <Timeline class="timeline">
        <TimeItem
            v-for="(item, index) in datas"
            :key="index"
            :color="timetheme[item.theme]"
        >
            <div class="timeCon">
                <p :class="item.theme">{{ item.title }}-{{ item.time }}</p>
                <p>{{ item.text }}</p>
            </div>
        </TimeItem>
    </Timeline>
</template>

<script lang="ts">
import { Timeline } from 'ant-design-vue'
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'Tooltip',
    components: {
        Timeline,
        TimeItem: Timeline.Item,
    },
    props: {
        titles: {
            type: String,
        },
        datas: {
            type: Array,
        },
    },
    setup() {
        let timetheme = {
            pink: 'pink',
            theme1: '#008c8c',
            theme2: '#f40',
        }
        return {
            timetheme,
        }
    },
})
</script>

<style lang="less" scoped>
.timeCon {
  //  background: red;
  // font-size: 13px;
  .pink {
    background: linear-gradient(45deg, rgb(247, 233, 228), #d2fcfc);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .theme1 {
    background: linear-gradient(45deg, #baf1f1, #d2fcfc);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .theme2 {
    background: linear-gradient(45deg, rgb(246, 187, 252), #d2fcfc);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  & > p {
    &:nth-of-type(1) {
      //   border: 1px solid red;
      display: inline-block;
      padding: 0 15px;
      font-size: 12px;
      color: #666;
    }
    &:nth-of-type(2) {
      font-size: 12px;
    }
  }
}
</style>
